<template>
  <div class="q-user">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      height="calc(100% - 44px)"
    >
      <el-table-column label="用户信息" align="center">
        <template slot-scope="{ row }">
          <img :src="row.avatar" alt width="20px;" style="vertical-align: middle;" />
          {{ row.realName }}
        </template>
      </el-table-column>
      <el-table-column prop="roleId" label="用户角色" align="center">
        <template slot-scope="{ row, $index }">
          <el-select
            v-if="row.ID != 1"
            v-model="row.roleId"
            @change="changeRole(row.ID, $event, $index)"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.role_name"
              :value="item.id"
            />
          </el-select>
          <span v-else align="center">{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="{ row }">
          <el-select
            v-if="row.ID !== 1"
            v-model="row.status.Int64"
            @change="changeStatus(row.ID, $event)"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else align="center">已审核</span>
        </template>
      </el-table-column>
      <el-table-column label="账号来源" align="center" :formatter="formFormat" />
      <el-table-column label="创建时间" prop="CreatedAt" align="center" :formatter="handleCreateTime" />
      <el-table-column label="修改时间" prop="UpdatedAt" align="center" :formatter="handleUpdateTime" />
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="{row, $index}">
          <el-button
            v-if="row.ID !== 1"
            size="mini"
            type="danger"
            style="margin-left:30px"
            @click="handleDelete(row.ID, $index)"
          >删除</el-button>
           <el-button
            v-if="row.form && row.form === 2"
            size="mini"
            type="primary"
            @click="handleChangePsw(row.ID, $index)"
          >修改密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- <q-table :data="list" :columns="columns"></q-table> -->
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData';
import { Message } from 'element-ui';
import { parseTime } from '@/utils/index';
export default {
  // components: {
  //   QTable: import('@/components/QTable')
  // },
  filters: {},
  data() {
    return {
      list: [],
      listLoading: true,
      roleOptions: [],
      statusOptions: [
        { value: -1, label: '禁用' },
        { value: -2, label: '待审核' },
        { value: 0, label: '已审核' },
      ],
      formOptions: { 1: '平台', 2: '注册' },
      currentPage: 1,
      pageSize: 20,
      total: 10,
      height: '720px'
    };
  },
  mounted() {
    this.fetchData();
    
  },
  methods: {
    /**
     * 用户列表
     */
    fetchData() {
      this.listLoading = true;
      // 获取用户列表
      getData('user/list', {
        page: this.currentPage,
        pageSize: this.pageSize
      })
        .then((response) => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total
        })
        .catch(() => {
          this.listLoading = false;
        });

      getData('user/public/role').then((response) => {
        this.roleOptions = response.data;
      });
    },
    /**
     * 改变用户权限
     * @param user_id
     * @param role_id
     */
    changeRole(user_id, role_id, index) {
      postData('user/role/user/update', { uid: user_id, roleId: role_id })
        .then((response) => {
          Message({
            message: response.message,
            type: 'success',
            duration: 500,
          });
        })
        .catch(() => {
          //
        });
    },
    /**
     * 改变用户状态
     * @param status
     */
    changeStatus(user_id, status) {
      postData('user/status/update', { uid: user_id, status: status })
        .then((response) => {
          Message({
            message: response.message,
            type: 'success',
            duration: 500,
          });
        })
        .catch(() => {
          //
        });
    },
    /**
     * 删除用户
     * @param userId
     */
    handleDelete(user_id, index) {
      this.$confirm('确认删除此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'warning',
      })
        .then(() => {
          // 确认处理逻辑
          postData('user/delete', { uid: user_id })
            .then((response) => {
              this.list.splice(index, 1);
              Message({
                message: response.message,
                type: 'success',
                duration: 1000,
              });
            })
            .catch(() => {
              //
            });
        })
        .catch(() => {
          // todo  取消处理逻辑  可不处理
        });
    },

    // 修改密码
    handleChangePsw(user_id, index) {
      this.$prompt('请输入新密码', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          const params = {
            password: value,
            uid: user_id,
          };
          postData('user/update/pwd', params).then((res) => {
            this.$message.success('修改密码成功');
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消',
          });
        });
    },
    handleCreateTime(row) {
      return parseTime(row.CreatedAt);
    },
    handleUpdateTime(row) {
      return parseTime(row.UpdatedAt);
    },
    formFormat(row, column) {
      return this.formOptions[row.form];
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.fetchData()
    },
    handleCurrentChange(value) {
      this.currentPage = value
      this.fetchData()
    }
  },
};
</script>

<style lang="scss" scoped>
.q-user {
  height: 100%;
  overflow: auto;
  padding: 20px;
  background-color: #FFFFFF;
  /deep/.el-pagination {
    margin-top: 12px;
    font-size: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    line-height: 1;
    justify-content: flex-end;
    position: relative;
    .el-pagination__total {
      position: absolute;
      left: 12px;
    }
    .el-pagination__sizes {
      position: absolute;
      left: 80px;
    }
  }
  
}
</style>
